import React, { Component } from "react";
import Header from "./compontents/Header"
import List from './compontents/List'
import Footer from './compontents/Footer'
import './app.css'

export default class App extends Component {

    state = {
        todos: [
            { id: '001', name: '吃饭', done: false },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '打代码', done: false },
            { id: '004', name: '逛街', done: false }
        ]
    }



    updateTodos = (todos) => {
        console.log('@todos',todos)
        this.setState({todos:todos})
    }
    updateTodo = (id, done) => {
        // 获取原来的todos 
        const { todos } = this.state
        const newTodos = todos.map(todoObj => {
            if (todoObj.id === id) return { ...todoObj, done }
            else return todoObj

        })
        this.setState({ todos: newTodos })
    }
    addTodo = (todoObj) => {
        // 获取原来的todos 
        const { todos } = this.state
        // 根据传入的生成一个新的
        const newTodos = [todoObj, ...todos]
        // 更新状态 
        this.setState({ todos: newTodos })
    }

    handleDelete = (id) => {
         // 获取原来的todos 
         const { todos } = this.state
         const newTodos =  todos.filter(todo=>{
            return todo.id!==id
         })
         this.setState({todos:newTodos})
    }
    render() {
        const { todos } = this.state
        return (
            <div className='todo-container'>
                <div className="todo-wraper">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} handleDelete={this.handleDelete} />
                    <Footer todos={todos} updateTodos={this.updateTodos} />
                </div>

            </div>
        )
    }
}